<template>
    <div>
        <div class="crumbs">
            <Breadcrumb separator="/">
                <BreadcrumbItem to="/role"><Icon type="md-options"/> 角色列表</BreadcrumbItem>
                <BreadcrumbItem>设置权限</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div class="form-box" style="width:100%;">
            <Form ref="form" :model="form" :label-width="80" :rules="rules">
                <FormItem label="角色名称" prop="name">
                    <Input v-model="form.name" placeholder="请输入角色名称" style="width:600px;"></Input>
                </FormItem>
                <FormItem label="英文标识" prop="name">
                    <Input v-model="form.role" placeholder="英文标识" style="width:600px;"></Input>
                </FormItem>
                <FormItem label="设置权限">
                    <Card class="box-card">
                        <CheckboxGroup v-model="form.pri">
                            <template v-for="(lv1, k) in allpri">
                                <h2 :key="'label_'+k" style="font-size:18px;border-bottom: 1px solid #ccc;">
                                    {{lv1.title}}
                                    <span style="float:right;">
                                        <Button v-if="lv1.subs" type="primary" round size="small" @click="checkall(k)">全选</Button>
                                        <Button v-if="lv1.subs" type="warning" round size="small" @click="cancelall(k)">取消</Button>
                                    </span>
                                </h2>
                                <template v-if="lv1.subs">
                                    <template v-for="(lv2, t) in lv1.subs">
                                        <template v-if="lv2.subs">
                                            <h3 :key="'label_'+k+'_'+t" style="font-size:16px;">　　{{lv2.title}}：
                                                <Checkbox v-for="lv3 in lv2.subs" :label="lv3.name" :key="lv3.name">{{lv3.title}}</Checkbox>
                                            </h3>
                                        </template>
                                        <template v-else>
                                            <Checkbox :label="lv2.name" :key="lv2.name" style="margin-left:32px;">{{lv2.title}}</Checkbox>
                                        </template>
                                    </template>
                                </template>
                                <template v-else>
                                    <Checkbox :label="lv1.name" :key="lv1.name">{{lv1.title}}</Checkbox>
                                </template>
                            </template>
                        </CheckboxGroup>
                    </Card>
                    
                </FormItem>
                <FormItem label="状态">
                    <Checkbox v-model="form.st" :true-value="1" :false-value="0">是否禁用</Checkbox>
                </FormItem>
                <div style="position:fixed;top:100px;right:50px;">
                    <Button icon="md-checkmark" type="primary" @click="submitForm">提交</Button>
                    <Button icon="ios-undo" @click="back">取消</Button>
                </div>
            </Form>
        </div>

    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                url: pub.apiDomain + 'role',
                allpri: [],//所有权限(编辑权限表单中使用)
                //弹窗绑定字段
                form: {
                    pri: [],    //已有权限
                    st: 1,
                },
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
                },
            }
        },
        created(){
            this.getData();
        },
        methods: {
            //加载数据
            getData() {
                let id = this.$route.params.id;
                //加载所有权限
                let api = [this.$axios.get(this.url + '/allpri')];
                if(id > 0) {
                    api.push(this.$axios.get(this.url + '/get/id/'+id));
                }
                this.$axios.all(api)
                .then(this.$axios.spread((res1, res2) => {
                    this.allpri = res1.d;
                    if(res2) this.form = res2.d;
                }));
            },
            //提交表单
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then(res => {
                            this.$Message.success('保存成功！');
                            this.$router.back();
                        })
                    } else {
                        return false;
                    }
                });
            },
            back(){
                this.$router.back();
            },
            //全选
            checkall(index) {
                let lv1 = this.allpri[index].subs;
                for(let k in lv1) {
                    if(lv1[k].subs) {
                        for(let i in lv1[k].subs) {
                            let name = lv1[k].subs[i].name;
                            if(this.form.pri.indexOf(name) == -1) {
                                this.form.pri.push(name);
                            }
                        }
                    }else{
                        let name = lv1[k].name;
                        if(this.form.pri.indexOf(name) == -1) {
                            this.form.pri.push(name);
                        }
                    }
                }
            },
            //取消
            cancelall(index) {
                let lv1 = this.allpri[index].subs;
                for(let k in lv1) {
                    if(lv1[k].subs) {
                        for(let i in lv1[k].subs) {
                            let name = lv1[k].subs[i].name;
                            let i = this.form.pri.indexOf(name);
                            if(i != -1) {
                                this.form.pri.splice(i, 1);
                            }
                        }
                    }else{
                        let name = lv1[k].name;
                        let i = this.form.pri.indexOf(name);
                        if(i != -1) {
                            this.form.pri.splice(i, 1);
                        }
                    }
                }
            }
        }
    }
</script>